<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh">
      <!--  <image src="../../static/img/sharebgc.png" mode="aspectFill" style="width: 100%; height: 1362rpx"></image> -->
      <canvas :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" canvas-id="myCanvas" />
      <view style="display: flex; align-items: center; margin-top: 78rpx; justify-content: space-around; padding-bottom: 98rpx" v-if="status != ''">
        <view class="save" @click="saveimg">保存到相册</view>
        <button class="sharepy" open-type="share">分享给好友</button>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  // 分享好友和群聊
  onShareAppMessage() {
    console.log('分享了朋友');
    uni.$http.post('/user/shareUser');
    return {
      title: '考神临门',
      path: '/parents/sharepage/sharepage',
      imageUrl: this.shareimg
    };
  },
  // 分享朋友圈
  onShareTimeline() {
    uni.$http.post('/user/shareUser');
    console.log('分享了朋友圈');
    return {
      title: '考神临门',
      path: '/parents/sharepage/sharepage',
      imageUrl: this.shareimg
      //分享朋友圈的参数
    };
  },
  data() {
    return {
      imgUrl: '',
      canvasWidth: '',
      canvasHeight: '',
      qrcode: '',
      imgbgc: '',
      shareimg: '', // 分享的图片
      status: '' // 生成后图片的状态 ,临时的图片路径
    };
  },
  methods: {
    // 获取二维码
    async getcode() {
      const res = await uni.$http.post('/user/qrcodeUser');
      console.log('图片', res);
      this.qrcode = res.data.data.qrcode;
      this.imgbgc = res.data.data.sharebgc;
    },
    // 保存图片
    saveimg() {
      console.log(11111, this.shareimg);
      uni.downloadFile({
        url: this.shareimg,
        success: (res) => {
          console.log('下载的本地文件', res.tempFilePath);
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: (res2) => {
              if (res.statusCode === 200) {
                return uni.showToast({
                  title: '图片保存成功',
                  icon: 'none'
                });
              }
            }
          });
        }
      });
    }
  },
  async onLoad() {
    // 获取手机的屏幕宽度
    uni.getSystemInfo({
      success: (res) => {
        // console.log('手机的屏幕宽度', res.screenWidth);
        this.canvasWidth = res.screenWidth;
      }
    });

    this.imgUrl = this.imgurl;
    await this.getcode();
    //创建画布对象
    const ctx = uni.createCanvasContext('myCanvas', this);
    uni.getImageInfo({
      src: this.imgUrl + this.imgbgc,
      success: (res) => {
        // this.canvasWidth = res.width / 2;
        this.canvasHeight = res.height / 2;
        // console.log('------------------', res.path);
        ctx.drawImage(res.path, 0, 0, this.canvasWidth, res.height / 2);
        uni.getImageInfo({
          src: this.imgUrl + this.qrcode,
          success: (res2) => {
            console.log('------------------', res2.path);
            ctx.drawImage(res2.path, 45, 264, 80, 80);
            ctx.draw();
            uni.canvasToTempFilePath({
              canvasId: 'myCanvas',
              success: (res3) => {
                // console.log('合成的带有小程序码的图片success》》》', res3.tempFilePath);
                this.status = res3.tempFilePath;
                uni.uploadFile({
                  url: this.upimg + '/api/common/upload',
                  filePath: res3.tempFilePath,
                  name: 'file',
                  formData: {
                    token: uni.getStorageSync('token')
                  },
                  success: (res4) => {
                    // console.log('上传后的文件', JSON.parse(res4.data));
                    this.shareimg = JSON.parse(res4.data).data.fullurl;
                    // console.log('上传后的文件---', this.shareimg);
                  }
                });
              }
            });
          }
        });
      }
    });
  }
};
</script>

<style lang="scss" scoped>
button {
  padding: 0;
  margin: 0;
}
.container {
  box-sizing: border-box;
  .save {
    box-sizing: border-box;
    width: 218rpx;
    height: 86rpx;
    text-align: center;
    line-height: 86rpx;
    background: #ffffff;
    border-radius: 100rpx;
    border: 2rpx solid #3553e8;
    font-weight: 500;
    font-size: 30rpx;
    color: #3553e8;
  }
  .sharepyq {
    box-sizing: border-box;
    width: 216rpx;
    height: 86rpx;
    text-align: center;
    line-height: 86rpx;
    background: #f1f1f1;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
  }
  .sharepy {
    box-sizing: border-box;
    width: 218rpx;
    height: 86rpx;
    text-align: center;
    line-height: 86rpx;
    background: #3553e8;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
  }
}
</style>
